#root {
  width: 500px;
  height: fit-content;
  position: relative;
  margin: 20px auto;
  box-shadow: 1px 1px 5px #ccc;
}

.header {
  background-color: #2c2c2c;
  color: #fafafa;
  padding: 20px;
}

.title {
  font-size: 18px;
  font-weight: 700;
  line-height: 3;
}

.subtitle {
  font-weight: 700;
}

.input {
  padding: 20px;
  display: flex;
}

.input input {
  flex: 1;
  margin-right: 12px;
}

.input .add {
  width: 60px;
  line-height: 2;
}

.list-container {
  padding: 20px;
}

.tabs {
  display: flex;
}

.tabs button {
  flex: 1;
  line-height: 2;
}

.tabs .active {
  background: #2c2c2c;
  color: #fafafa;
}

.list-item {
  display: flex;
  margin: 12px 0;
}
.list-item .content {
  flex: 1;
}

.footer {
  padding: 20px;
  text-align: right;
}

.finished {
  background-color: #ececec;
  text-decoration: line-through;
  color: #ccc;
}